<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>网上PC销售商城</title>
		<link rel="stylesheet" href="./css/themes/default/jquery.mobile-1.4.5.min.css">
		<link rel="stylesheet" href="./_assets/css/jqm-demos.css">
		<link rel="shortcut icon" href="./favicon.ico">
		<link rel="stylesheet" href="css/mui.min.css">
		<script src="./js/jquery.js"></script>
		<script src="./_assets/js/index.js"></script>
		<script src="./js/jquery.mobile-1.4.5.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				//自动播放图片
				mui.init({
					swipeBack: true
				});
				var slider = mui("#slider");
				slider.slider({
					interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
				});

			}

			function searchByTitle() {
				var info = $('#filterSet').val();
				var sql = "select * from t_pc where title like '%" + info + "%'";
				document.querySelector('#status').innerHTML = "";
				db.transaction(function(tx) {
					tx.executeSql(sql, [], function(tx, results) {
						var len = results.rows.length,
							i;
						for(i = 0; i < len; i++) {
							document.querySelector('#status').innerHTML += "<div class='ui-grid-a'><div class='ui-block-a'><img src='" +
								results.rows.item(i).img + "' width='90%' /></div><div class='ui-block-b'><p>" +
								results.rows.item(i).title + "</p><p>价格：" +
								results.rows.item(i).price + "</p><a target='_blank' href='details.html?id=" +
								results.rows.item(i).id + "' class='ui-btn'>详情</a></div></div>";
						}
					}, null);
				});

			}
		</script>
		<style type="text/css">
			#active {
				background-color: #e8e8e8/*{a-bdown-background-color}*/
				;
				border-color: #ddd/*{a-bdown-border}*/
				;
				color: #333/*{a-bdown-color}*/
				;
				text-shadow: 0/*{a-bdown-shadow-x}*/
				1px/*{a-bdown-shadow-y}*/
				0/*{a-bdown-shadow-radius}*/
				#f3f3f3/*{a-bdown-shadow-color}*/
				;
			}
		</style>
	</head>

	<body>
		<!-- Start of first page: #one -->
		<div data-role="page" id="pageOne" >
			<div data-role="header">
				<h1>网上PC销售商城</h1>
			</div>
			<!-- /header -->
			<div role="main" class="ui-content">
				<div data-demo-html="true">
					<input data-type="search" onkeypress="searchByTitle()" id="filterSet" placeholder="search..." />
				</div>

				<!--图片轮播         -->
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="img/banner1.jpg"></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="img/banner1.jpg"></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="img/banner2.jpg"></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="img/banner3.jpg"></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="img/banner4.jpg"></a>
						</div>
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="img/banner1.jpg"></a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<!--图片轮播    -->
				<br />
				<div id="status">

				</div>
			</div>

			<!-- /content -->
			<div data-role="footer" style="position: fixed;" data-position="fixed" data-tap-toggle="false">
				<div data-role="navbar" data-theme="a">
					<ul>
						<li>
							<a id="active" href="#pageOne" target="_blank"><img src="img/home.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageTwo" target="_blank"><img src="img/comment.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageThree" target="_blank"><img src="img/cart.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageFour" target="_blank"><img src="img/user.svg" width="50px" /></a>
						</li>
					</ul>
				</div>
			</div>

			<!-- /footer -->
		</div>
		<!-- /page one -->
		<!-- Start of second page: #two -->
		<div data-role="page" id="pageTwo" data-theme="a">
			<div data-role="header">
				<h1>消息</h1>
			</div>
			<!-- /header -->
			<div role="main" class="ui-content">

				<ul id="msg_list" class="mui-table-view mui-table-view-chevron">
					<!--<li class="mui-table-view-cell mui-media">
						<a class="mui-navigate-right">
							<img class="mui-media-object mui-pull-left" src="img/a.jpg">
							<div class="mui-media-body">
								CBD
								<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
							</div>
						</a>
					</li>-->

				</ul>
			</div>
			<!-- /content -->
			<div data-role="footer" data-position="fixed" data-tap-toggle="false">
				<div data-role="navbar" data-theme="a">
					<ul>
						<li>
							<a href="#pageOne" target="_blank"><img src="img/home.svg" width="50px" /></a>
						</li>
						<li>
							<a id="active" href="#pageTwo" target="_blank"><img src="img/comment.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageThree" target="_blank"><img src="img/cart.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageFour" target="_blank"><img src="img/user.svg" width="50px" /></a>
						</li>
					</ul>
				</div>
			</div>
			<!-- /footer -->
		</div>
		<!-- /page three -->
		<!-- Start of second page: #three -->
		<div data-role="page" id="pageThree" data-theme="a">
			<div data-role="header">
				<h1>购物车</h1>
			</div>
			<!-- /header -->
			<div id="cart_view" role="main" class="ui-content">
				<!--<div class='ui-grid-a'>
					<div class='ui-block-a'>
						<img src="img/lx_330c.jpg" width="90%" />
					</div>
					<div class='ui-block-b'>
						<h3>联想330c</h3>
						<p>单价：9999</p>
						数量：
						<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
							<button data-role="none" class="mui-btn mui-numbox-btn-minus" type="button">-</button>
							<input data-role="none" class="mui-numbox-input" type="number" />
							<button data-role="none" class="mui-btn mui-numbox-btn-plus" type="button">+</button>
						</div>
						<button data-role="none" style="margin-top: 10px;" type="button" class="mui-btn mui-btn-danger">结算</button>
					</div>
				</div>-->

			</div>
			<!-- /content -->
			<div data-role="footer" data-position="fixed" data-tap-toggle="false">
				<div data-role="navbar" data-theme="a">
					<ul>
						<li>
							<a href="#pageOne" target="_blank"><img src="img/home.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageTwo" target="_blank"><img src="img/comment.svg" width="50px" /></a>
						</li>
						<li>
							<a id="active" href="#pageThree" target="_blank"><img src="img/cart.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageFour" target="_blank"><img src="img/user.svg" width="50px" /></a>
						</li>
					</ul>
				</div>
			</div>
			<!-- /footer -->
		</div>
		<!-- /page three -->
		<!-- /page four -->
		<!-- Start of second page: #four -->
		<div data-role="page" id="pageFour" data-theme="a">
			<div data-role="header">
				<h1>用户中心</h1>
			</div>
			<!-- /header -->
			<div id="userManage" role="main" class="ui-content">
				<!--<div class='ui-grid-a'>
					<div class='ui-block-a'>
						<img src="img/tx1.jpg" style="border-radius: 50%;" width="90%" data-corners="true" />
					</div>
					<div class='ui-block-b'>
						<h1>canan</h1>
						<p><a href="">注销</a></p>
					</div>
				</div>-->
			</div>
			<div style="margin-top: 23%; ">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a id="cart" href="#pageThree" class="mui-navigate">购物车</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="order" href="#order" class="mui-navigate">我的订单</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="msg" href="#pageTwo" class="mui-navigate">我的消息</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="assistance" class="mui-navigate">我的客服</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="rate" class="mui-navigate">意见反馈</a>
					</li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed" data-tap-toggle="false">
				<div data-role="navbar" data-theme="a">
					<ul>
						<li>
							<a href="#pageOne" target="_blank"><img src="img/home.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageTwo" target="_blank"><img src="img/comment.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageThree" target="_blank"><img src="img/cart.svg" width="50px" /></a>
						</li>
						<li>
							<a id="active" href="#pageFour" target="_blank"><img src="img/user.svg" width="50px" /></a>
						</li>
					</ul>
				</div>
			</div>
			<!-- /footer -->
		</div>
		<!-- /page four -->

		<!-- Start of third page: #popup -->
		<div data-role="page" id="pageOrder">
			<div data-role="header" data-theme="c">
				<a href="#" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
				<h1>订单详情</h1>
			</div>
			<!-- /header -->
			<div id="orderdetails" role="main" class="ui-content">
				<!--<img src='img/lx_330c.jpg' width='80%' />
				<p>商品名称：联想x330c</p>
				<p>商品单价：9999.00</p>
				<p>购买数量：9</p>
				<p>收获地址：广东省东莞市文苍鹭1号</p>
				<p>联系电话：13456784561</p>
				<p>联系人：魏迦南</p>-->
			</div>
			<!-- /content -->
			<div data-role="footer" data-position="fixed" data-tap-toggle="false">
				<div id="jiesuan" class='ui-grid-a' style="height: 50px;">
					<!--<div class='ui-block-a'><h3 id='total' style='text-align: center;'>合计：99999.00</h3></div>
					<div class='ui-block-b'><button data-role = 'none' style='width: 100%;height: 50px;' type='button' class='mui-btn mui-btn-danger'>确认订单</button></div>-->
				</div>
			</div>
			<!-- /footer -->
		</div>
		<!-- /page popup -->

		<!--start of order-->
		<div data-role="page" id="order" data-theme="c">
			<div data-role="header">
				<h1>我的订单</h1>
			</div>
			<!-- /header -->
			<div id="orderlist" data-role="content" class="ui-content">

				<!--<div class='ui-grid-a'>
					<div class='ui-block-a'><img src='img/apple01.jpg' width='80%' /></div>
					<div class='ui-block-b'>
						<p>名称：苹果aa</p>
						<p>数量：1</p>
						<p>订单金额：1111</p>
						<p>收获地址：广东省汕尾市华侨区</p>
						<p>收货人：苹果aa</p>
						<p>订单状态：代发货</p>
					</div>
					<hr>
				</div>-->
				<!--<ul data-role="listview">
					<li>
						<a>
							<img src="img/apple01.jpg" />
							<h3>联想330c</h3>
							<p>单价：9999</p>
							<p>数量：9</p>
							<p>金额：11111</p>
							<p>下单时间：2019-10-1</p>
							<p>订单状态：待支付</p>
						</a>
					</li>
				</ul>-->

			</div>

			<!-- /content -->
			<div data-role="footer" data-position="fixed" data-tap-toggle="false">
				<div data-role="navbar" data-theme="a">
					<ul>
						<li>
							<a href="#pageOne" target="_blank"><img src="img/home.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageTwo" target="_blank"><img src="img/comment.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageThree" target="_blank"><img src="img/cart.svg" width="50px" /></a>
						</li>
						<li>
							<a href="#pageFour" target="_blank"><img src="img/user.svg" width="50px" /></a>
						</li>
					</ul>
				</div>
			</div>
			<!-- /footer -->
		</div>
		<!--end of order-->

	</body>

</html>